<template>
  <div class="wechat-lib">
    <nav-bar></nav-bar>
    <div class="page-main clearfix">
      <div class="page-left">
        <div class="xyd-container today">
          <div class="xyd-c-title">今日微库</div>
          <div class="xyd-c-content" v-if="today.length !== 0">
            <div class="top" @click="changeDetail(today[0])">
              <img :src="today[0].pic"/>
              <span class="title">{{today[0].title}}</span>
            </div>
            <div class="bottom">
              <ul>
                <li v-for="item,i in today.slice(1)" :key="i" @click="changeDetail(item)">
                  <span>{{item.title}}</span>
                  <img :src="item.pic"/>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="xyd-container history">
          <div class="xyd-c-title">历史推文</div>
          <div class="xyd-c-content">
            <ul v-for="item,i in history" :key="i">
              <li @click="changeDetail(item)">{{item.title}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="page-right">
        <div class="xyd-container">
          <div class="xyd-c-title clearfix">
            <span class="left">
              <span>正在阅读：{{detail.title}}</span>
              <span>作者：{{detail.author}}</span>
              <span>上传时间：{{detail.create_time}}</span>
              <span>浏览：{{detail.visit}}次</span>
              <span>下载：0次</span>
            </span>
            <span class="right">
              <a href="javascript:;" title="收藏">
                <i class="xyd-collection2"></i>
              </a>
              <a href="javascript:;" title="下载">
                <i class="xyd-download2" ></i>
              </a>
              <a href="javascript:;" title="分享">
                <i class="xyd-share2" ></i>
              </a>
            </span>
          </div>
          <div class="xyd-c-content">
            <h3>{{detail.title}}</h3>
            <p style="text-align:center;overflow:hidden;"><img :src="detail.pic"/></p>
            <div v-html="detail.content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getWechat } from 'api/resource'
  import { NavBar } from 'views/layout'
  import landspace from '@/assets/mock_images/landspace.png'
  import moment from 'moment'

  export default {
    name: 'Listen',
    components: {
      NavBar
    },
    data() {
      return {
        landspace,
        detail: {},
        today: [],
        history: []
      }
    },
    created() {
      // const { id } = this.$router.query
      getWechat()
      .then(res => {
        console.log(res)
        this.detail = {
          ...res.data.detail,
          create_time: moment(res.data.detail.create_time).format('YYYY-MM-DD')
        }
        this.today = res.data.today
        this.history = res.data.history
      })
      .catch(err => console.log(err))
    },
    methods: {
      changeDetail(item) {
        this.detail = item
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.wechat-lib{
  .page-main{
    .page-left{
      .xyd-container.today{
        .xyd-c-title{

        }
        .xyd-c-content{
          .top{
            &:hover{
              background-color: #f8f8f8;
              .title{
                height: 20px;
                background-color: rgba(132,132,132,.7)
              }
            }
            padding: 10px;
            cursor: pointer;
            position: relative;
            img{
              width: 100%;
              height: 96px;
            }
            .title{
              color: #fff;
              position: absolute;
              bottom: 16px;
              left: 10px;
              right: 10px;
              line-height: 20px;
              padding: 0 5px;
              height: 0;
              overflow: hidden;
              transition: all .5s;
              background-color: rgba(132,132,132,0)
            }
          }
          .bottom{
            ul{
              >li{
                &:hover{
                  background-color: #f8f8f8;
                }
                line-height: 35px;
                padding: 10px;
                cursor: pointer;
                >span{
                  vertical-align: middle;
                }
                >img{
                  float: right;
                  vertical-align: middle;
                  width: 35px;
                  height: 35px;
                }
              }
            }
          }
        }
      }
      .xyd-container.history{
        .xyd-c-title{

        }
        .xyd-c-content{
          >ul{
            padding: 15px;
            >li{
              line-height: 30px;
            }
          }
        }
      }
    }
    .page-right{
      .xyd-container{
        .xyd-c-title{
          padding: 0 20px;
          .left{
            float: left;
            font-size: 14px;
            color: #666;
            >span{
              margin-right: 15px;
            }
          }
          .right{
            float: right;
            >a{
              padding: 0 10px;
            }
          }
        }
        .xyd-c-content{
          padding: 30px;
          h3{
            text-align: center;
          }
          p{
            // text-align: center;
          }
        }
      }
    }
  }
}
</style>